//编辑技能标签
import React, { Component } from 'react'
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

import { Cbenefitsbody_Style as styles } from '../../../../styles';
import { Cresumetop_Style as styles1 } from '../../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
import Modal from 'react-native-modal';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
import Benefits_list from './benefits_list'
import { myAlert } from '../../../util/compatible';

export default class Cbenefits_body extends Component {

    constructor(props) {
        super(props);
        this.state = {
            welfares: [],
            a: '',
            reload: 0,
            isModalVisible: false,
            thisText: false
        }
    };

    _showModal = () => this.setState({ isModalVisible: true })
    _hideModal = () => this.setState({ isModalVisible: false })

    //加载后渲染页面
    componentDidMount() {
        if (!this.state.welfares[0] && this.props.list[0]) {
            this.setState({ welfares: this.props.list });
        }
    }

    render() {
        return (

            <View>
                <View style={[styles1.top_all, {
                    width: width * 1,
                    elevation: 5,
                    shadowColor: 'black',
                    shadowOpacity: 1,
                    shadowRadius: 5
                }]}>
                    <TouchableOpacity activeOpacity={1} style={styles1.top_back} onPress={() => { this.props.navigation.goBack() }}>
                        <Icon
                            name={'ios-arrow-back'}
                            size={25}
                            color={'#ffffff'} />
                    </TouchableOpacity>

                    <Text style={styles1.top_text}>福利待遇</Text>

                    <TouchableOpacity activeOpacity={1} style={styles1.top_warn} onPress={() => {
                        const a = this.state.welfares;
                        this.props.rollback(a);
                        this.props.navigation.goBack()
                    }}>
                        <Text style={styles1.top_text} >保存</Text>
                    </TouchableOpacity>

                </View >


                <View style={styles.skill_all}>
                    <Benefits_list
                        list={this.state.welfares}
                        deleHY={this.deleFL.bind(this)}
                    />
                    <TouchableOpacity
                        onPress={this._showModal}
                        style={styles.skill_outm}>
                        <Text style={styles.skill_add}>添加 + </Text>
                    </TouchableOpacity>
                    <Modal isVisible={this.state.isModalVisible}
                        animationIn={'slideInLeft'}
                        animationOut={'slideOutRight'}>
                        <View style={styles.skill_modal}>
                            <Text style={styles.skill_text}>请输入标签（最多10个字）</Text>
                            <TextInput
                                style={styles.skill_input}
                                underlineColorAndroid="#eeeeee"
                                placeholder="请输入内容"
                                onChangeText={this._text.bind(this)}
                            />
                            <View style={styles.skill_yesno}>
                                <TouchableOpacity
                                    onPress={this.add.bind(this)}
                                    style={styles.skill_yesout}>
                                    <Text style={styles.skill_yes}>确定</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    onPress={this._hideModal}
                                    style={styles.skill_noout}>
                                    <Text style={styles.skill_no}>取消</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </Modal>
                </View >
            </View>
        )
    }

    _text(text) {
        if (text.length < 11) {
            this.setState({ thisText: true });
        }
        this.setState({ a: text });
    }

    add() {
        if (this.state.a.length < 11) {
            this.setState({ isModalVisible: false })
            let w = {
                companyId: null,
                welfareId: null,
                welfareName: this.state.a
            }
            this.state.welfares.push(w);
            this.setState({ reload: this.state.reload++ });
        } else if (this.state.a.length > 10) {
            myAlert('文字超限');
        }
    }

    deleFL(name) {
        //取得子组件返回的值
        //重新设置父组件的state
        let count;
        for (j = 0; j < this.state.welfares.length; j++) {
            if (name == this.state.welfares[j].welfareName) {
                count = j;
            }
        }
        this.state.welfares.splice(count, 1);
        this.setState({ reload: this.state.reload++ });
    }
}